import React from 'react';
import { Card } from 'react-fule-ui';
import './index.scss';

export default function CssTableFlex() {
  return (
    <>
      <Card>
        <Card.Header>一行，左边平铺</Card.Header>
        <Card.Body>
          <div className="CssTableFlex-table style-1">
            <div className="CssTableFlex-table__main">
              <div className="CssTableFlex-madia">
                <div className="CssTableFlex-madia__item">id1</div>
                <div className="CssTableFlex-madia__item">id2</div>
                <div className="CssTableFlex-madia__item">id3</div>
              </div>
            </div>
            <div className="CssTableFlex-table__tips">提示文案</div>
          </div>
        </Card.Body>
      </Card>
      <Card>
        <Card.Header>一行，左边自适应1</Card.Header>
        <Card.Body>
          <div className="CssTableFlex-table">
            <div className="CssTableFlex-table__main">
              <div className="CssTableFlex-madia">
                <div className="CssTableFlex-madia__item">1</div>
                <div className="CssTableFlex-madia__item">2</div>
                <div className="CssTableFlex-madia__item">3</div>
              </div>
            </div>
            <div className="CssTableFlex-table__tips">提示文案</div>
          </div>
        </Card.Body>
      </Card>
      <Card>
        <Card.Header>一行，左边自适应2</Card.Header>
        <Card.Body>
          <div className="CssTableFlex-table">
            <div className="CssTableFlex-table__main">
              <div className="CssTableFlex-madia">
                <div className="CssTableFlex-madia__item">块1</div>
                <div className="CssTableFlex-madia__item">块2</div>
                <div className="CssTableFlex-madia__item">块3</div>
                <div className="CssTableFlex-madia__item">块4</div>
                <div className="CssTableFlex-madia__item">块5</div>
                <div className="CssTableFlex-madia__item">块6</div>
                <div className="CssTableFlex-madia__item">块7</div>
                <div className="CssTableFlex-madia__item">块8</div>
              </div>
            </div>
            <div className="CssTableFlex-table__tips">提示文案</div>
          </div>
        </Card.Body>
      </Card>
      <Card>
        <Card.Header>多行(待实现)</Card.Header>
        <Card.Body>
          <div className="CssTableFlex-table">
            <div className="CssTableFlex-table__main">
              <div className="CssTableFlex-madia">
                <div className="CssTableFlex-madia__item">块1</div>
                <div className="CssTableFlex-madia__item">块2</div>
                <div className="CssTableFlex-madia__item">块3</div>
                <div className="CssTableFlex-madia__item">块4</div>
                <div className="CssTableFlex-madia__item">块5</div>
                <div className="CssTableFlex-madia__item">块6</div>
                <div className="CssTableFlex-madia__item">块7</div>
                <div className="CssTableFlex-madia__item">块8</div>
              </div>
            </div>
            <div className="CssTableFlex-table__tips">提示文案</div>
          </div>
        </Card.Body>
      </Card>
    </>
  );
}
